<template>
	<div class="register">
		<div class="login_or_register">
	      <div class="login_content">
	        <div class="login_bac ">
	          <div class="login_content1 ">
	            <p>注册</p>
	            <i>账号：</i> <input type="text" placeholder="请输入手机号" class="register_content_input" v-model= "LUserPhone" @blur="checkLPhone"><br>
	            <span class="tishixiaoxi disappear">请输入手机号</span>
	            <i>密码：</i><input type="password" placeholder="请输入密码" class="register_content_pwd" v-model="LUserPsd" @blur="checkLPsd"><br>
	            <span class="tishixiaoxi disappear">请输入密码</span>
	            <i>验证码：</i><input type="text" placeholder="请输入短信验证码" class="yanzhengma_input" v-model="picLyanzhengma">  <el-button type="primary" :class="{disabled: !this.canClick}" @click="countDown" style="position: absolute;left: 290px;">{{content}}</el-button><br>
	            <span class="tishixiaoxi disappear" >请输入短信验证码</span>
	            <a class="user_login" @click="registerss">注册</a>
	          </div>
	        </div>
	      </div>
    	</div>
	</div>
</template>
<script>
	export default {
		name: 'register',
		data() {
			return {
				userPhone:'',
		        dialog: false,
		        LUserPhone:'',
		        LUserPsd:'',
		        picLyanzhengma:'',
		        checkCode:'',
		        indexlogin:[],
		        content: '发送验证码',
   				totalTime: 60,
   				canClick: true,
   				ma:[]
			}
		},
    	mounted() {
    		
    		
    		
    		
    		
    		
//  		$(".primary").click(function(){
//  			$(".primary").attr('disabled',true);
//  			$(".primary").addClass("active");
//  			
//  			$(".primary").text("发送短信中");
//  		});
    	},
	    methods:{
	    	
	    	countDown () {
				 if (!this.canClick) return  //改动的是这两行代码
				 this.canClick = false
				 this.content = this.totalTime + 's后重新发送'
				 let clock = window.setInterval(() => {
				  this.totalTime--
				  this.content = this.totalTime + 's后重新发送'
				  if (this.totalTime < 0) {
				   window.clearInterval(clock)
				   this.content = '重新发送验证码'
				   this.totalTime = 60
				   this.canClick = true  //这里重新开启
				  }
				 },1000);
				 

				  
				  
		 //把后台生成的验证码存入sessionStorage
	  this.axios.post('/api/HomePageInterface/VerificationCode', this.qs.stringify({}), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
        .then(function(res) {
          if (res.data.status == "200") {
              //把后台生成的验证码存入sessionStorage
             window.sessionStorage.setItem("sjs",res.data.msg);
          }
          //控制台打印请求成功时返回的数据
          //bind(this)可以不用
        }.bind(this))
        .catch(function(err) {
          if (err.response) {
            console.log(err.response)
            //控制台打印错误返回的内容
          }
        }.bind(this));

				  
				  
				  
				  
				 
				 var phone=$(".register_content_input").val();
				   //调用短信接口
			      this.axios.post('/api/HomePageInterface/ma', this.qs.stringify({
			      	phone:phone,
			      	VerificationCode:window.sessionStorage.getItem("sjs")
			      	
			      }), {
			        headers: {
			          'Content-Type': 'application/x-www-form-urlencoded'
			        }
			      })
			        .then(function(res) {
			          if (res.data.status == "200") {
			         
			            this.ma = res.data.msg;
			          }
			          //控制台打印请求成功时返回的数据
			          //bind(this)可以不用
			        }.bind(this))
			        .catch(function(err) {
			          if (err.response) { 
			            console.log(err.response)
			            //控制台打印错误返回的内容
			          }
			        }.bind(this));
			},
			
	
			
			registerss(){
				
			var Verification=window.sessionStorage.getItem("sjs");
				if(this.picLyanzhengma==Verification)
				{
					this.axios.post('/api/HomePageInterface/register', this.qs.stringify({
					userName:this.LUserPhone,
					userPwd:this.LUserPsd
				}), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})
				.then(function(res) {
					
					if(res.data.status == "200") { 
						 this.$message({ type: 'success', message: '注册成功！！'});
						setInterval(function() {
								window.location.href = 'index';
							}, 1000);
							
					}else if(res.data.status == "5")
					{
						
						this.$message.error('验证码输入错误！！');
					}
					else if(res.data.status == "400")
					{
						this.$message.error('注册失败！！');
					}else if(res.data.status == "600")
					{
						this.$message('用户名已存在！！');
					}
					else
					{
						this.$message.error('程序错误！！');
					}
					//控制台打印请求成功时返回的数据
					//bind(this)可以不用
				}.bind(this))
				.catch(function(err) {
					if (err.response) {
						console.log(err.response)
							//控制台打印错误返回的内容
					}
					//bind(this)可以不用
				}.bind(this));
				}else
				{
					alert("请输入正确的验证码");
					return false;
				}
 
				
			},
	    	
	    	
	      goto_protocol(){
	        this.$router.push({path:"/protocol"})
	
	      },
	      checkUserPhone(){
	        if(this.userPhone == ''){
	          $(".hiddenTanchuang").removeClass('hiddenTanchuang')
	        }
	      },
	      hiddenTanchuang(){
	        $(".tanchuang").addClass("hiddenTanchuang")
	      },
	
	      // 验证登陆用户名格式
	      checkLPhone(){
	      	 let value =this.LUserPhone.replace('/(^\s*)|(\s*$)','')  //去除字符串前后空格
	 		 let num = Number(value)  //将字符串转换为数字
	        if(this.LUserPhone ==""|| this.LUserPhone == null==undefined){
	        	
	          $(".login_content1 span:eq(0)").removeClass("disappear");
	          $(".login_content1 span:eq(0)").text("请输入手机号")
	
	        }
	        else if(isNaN(num)){
	        	$(".login_content1 span:eq(0)").removeClass("disappear");        
	        	$(".login_content1 span:eq(0)").text("请输入正确手机号");
	        }
	        
	        else{
	        	return true;
	        }
	//      else if(this.LUserPhone.search(/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/)==0){
	//        $(".login_content1 span:eq(0)").addClass("disappear")
	//        return true;
	//
	//      }else{
	//        $(".login_content1 span:eq(0)").removeClass("disappear");
	//        $(".login_content1 span:eq(0)").text("请输入正确用户名")
	//      }
	      },
	      //验证登陆密码格式
	      checkLPsd(){
	        if(this.LUserPsd == ''){
	          $(".login_content1 span:eq(1)").text("请输入密码");
	          $(".login_content1 span:eq(1)").removeClass("disappear")
	
	        }
	//      else if(this.LUserPsd.search(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/) == 0){
	//        $(".login_content1 span:eq(1)").addClass("disappear")
	//        return true;
	//
	//
	//      }else{
	//        $(".login_content1 span:eq(1)").removeClass("disappear");
	//        $(".login_content1 span:eq(1)").text("密码必须6-20位，包含字母与数字")
	//
	//      }
	    }
	      
	      
	  
	      
	
	    },
	    created: function() {
	      this.$emit('public_header', false);
	      this.$emit('public_footer', false);
	    }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.register {
		 background: url(../../assets/image/logogb.jpg) no-repeat;
   		 background-size: cover;
  		 width: 100%;
    	 height: 716px;
   		 margin-top: -50px;
	}
	
	
	.left{
    float: left;
  }
  .right{
    float: right;
  }
  .clearfix:after{
    content:'';
    display:block;
    height:0;
    clear:both;
  }
  .login_or_register{
    background-color: white;
    padding-bottom: 50px;
  }
  /*logo*/
  .logo1{
    text-align: center;
    padding:40px 0 50px ;
    margin:0 auto;
  }
  /*login和register部分*/
  .login_bac{
    width:1%;
    height: 99%;
    position: absolute;
    left:80px;
    background-size: 1180px 728px;
    margin: 0 auto;
    position: relative;
  }
  .register_content{
    width:400px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, .5);
    position: absolute;
    left:60px;
    top:80px;
    padding-left: 30px;
    padding-bottom: 50px;
  }
  .tianxie_img{
    width:26px;
    vertical-align: middle;
    margin-right: 10px;
  }
  .tishixiaoxi{
    font-size: 14px;
    color:#ed711f;
    display: block;
    margin-left: 30px;
    line-height: 30px;

  }
  .yanzhengma_input{
    width: 140px;
    margin-right: 140px;
  }
  .disappear{
    visibility:hidden;
  }
  .register_content p{
    margin-top: 30px;
    font-size: 25px;
    line-height: 18px;
    margin-bottom: 15px;
  }
  .register_content input{
    padding: 5px 0 5px 10px;
    margin-left: 30px;
    height: 30px;
    /*margin-top: 25px;*/
    border: 1px solid #e6e6e6;
  }
  .register_content_input{
    width:280px;
    height: 30px;
    padding: 5px 0 5px 10px;
    /*margin-top: 30px;*/
    border: 1px solid #e6e6e6;
    margin-left: 30px;
  }
  .register_content_pwd{
    width:280px;
    height: 30px;
    padding: 5px 0 5px 10px;
    /*margin-top: 30px;*/
    border: 1px solid #e6e6e6;
    margin-left: 30px;
  }
  .verification{
    vertical-align: middle;
    margin-left: 10px;
  }
  .agreement{
    position: relative;
    top: -10px;
  }
  .read_already{
    position: relative;
    top:-21px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    margin-left: 5px;
  }
  .read_already a{
    color:#053d84;
  }
  .send_message{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    color:#ccc;
    padding-left: 45px;
    padding-right: 5px;
    background: url('/static/img/message.png') no-repeat 10px 8px;
    background-size: 25px;
    border: 1px solid #f3f3f3;
    margin-left: 10px;
    cursor: pointer;
  }
  .next{
    display: block;
    width: 287px;
    height: 50px;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    background-color: #053d84;
    border-radius: 5px;
    margin-left: 40px;
    cursor: pointer;

  }
  
  /*登录模块*/
  .login_content1{
    width:400px;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, .5);
    position: absolute;
    /*right:60px;*/
    top:180px;
    padding-left: 30px;
    padding-bottom: 50px;
    /*opacity: 0.7;*/
  }
  .user_login{
    display: block;
    width: 287px;
    height: 50px;
    font-size: 18px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    background-color: #a2be3c;
    border-radius: 5px;
    margin-left: 40px;
    /*margin-top: 30px;*/
    cursor:pointer;
  }
  .login_content1 p{
    margin-top: 30px;
    font-size: 25px;
    line-height: 18px;
    margin-bottom: 15px;
  }
  .login_content1 input{
    padding: 5px 0 5px 10px;
    margin-left: 30px;
    height: 30px;
    /*margin-top: 25px;*/
    border: 1px solid #e6e6e6;
  }
  
  .forget{
    text-align: right;
    position: relative;
    top:-20px;
    cursor: pointer;
  }
  .forget a{
    font-size: 14px;
    color:#053d84;
    margin-right: 80px;
  }
  /*弹窗*/
  .tanchuang{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0,.5);
    z-index:100;
  }
  .hiddenTanchuang{
    display: none;
  }
  .inTanchuang{
    position: absolute;
    text-align: center;
    width: 300px;
    height: 169px;
    padding-top: 10px;
    left: 50%;
    top: 50%;
    border-radius: 10px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-color: #fff;
  }
  .errorIcon{
    width:55px;
  }
  .register_content  .cue{
    font-size: 14px;
    text-align: center;
    margin-top: 15px;
  }
  .sure{
    display: inline-block;
    color: #fff;
    width: 100px;
    height: 20px;
    padding: 6px 10px;
    background: #053D84;
    border-radius: 5px;
    font-size: 18px;
    line-height: 18px;
    margin-top: 10px;
    cursor: pointer;
  }
  .primary.active{
  	background: #AFAFAF;
  	color: white;
  	cursor: auto;
  	border: none;
  }
  .disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; 
}
</style>